<template>
  <div class="articbody">
      <blg-header></blg-header>
      <el-row>
          <el-col :span='18' >
              <div class="content-heard">
                <h1>{{title}}</h1>
              <p>
                <span>作者：{{a_id}}</span>
                <span>日期：2022-05-03</span>
              </p>
              </div>
             
             
           <v-md-preview :text='text' class="textback"></v-md-preview>

           <comments class="comments" :aId=this.a_id></comments>
          </el-col>
          <!-- 侧边 -->
          <el-col :span='6'>
              <mycard></mycard>
          </el-col>

      </el-row>
      
  </div>
</template>

<script>
import Header from '../components/header.vue'
import mycard from '../components/mycard.vue'
import comments from '../components/comments.vue'
export default {
    name:'Artic',
    components:{
       'blg-header' :Header,
       mycard,
       comments
    },
    data(){
        return {
            text:'',
            a_id:0,
            title:'',
            type:'',
        }
    },
    methods:{
        async initdata(){
            this.a_id = parseInt(this.$route.query.arctic_id);
            console.log(this.a_id+"=="+typeof this.a_id);
            const {data} = await this.axios.get("/article/getArticbyid",{
            params: {
              id:this.a_id
              },
            });
            console.log(data);
            this.text=data.content
            this.title=data.title
            this.type=data.type
        }
    },
    created(){
        // this.a_id = this.$route.query.arctic_id;
        // console.log('需要渲染的文章ID：'+a_id);
        this.initdata();
    },
    watch:{
        $route(to,from){
            if(to.path==='/showartic'){
            console.log(to);
            console.log(from);
            this.initdata();
            }   
        }
       	// '$route': 'initdata'
    }
}
</script>

<style lang="less" scoped>

.content-heard{
    h1{
        margin: 20px 0;
    }
    p{
        margin-bottom: 10px;
        span{
            margin: 0px 50px;
        }   
    }
    
}
.textback{
    background-color:#FFFFFF; 
    margin: 0 30px;
    text-align: start;
}
.comments{   
    margin: 30px
}
</style>


